import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

input_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('Input: Bootstrap样式的输入组件', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(html.P('允许文本或数字输入'), width=2, align='center'),
                dbc.Col(dbc.Input(id="input", placeholder="请输入文本或数字", type="text"), width=8),
                dbc.Col(html.P(id="output_001"), width='auto'),
            ],
            justify='between'
        ),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(
                    html.P('只允许输入数字', style={'background-color': 'HotPink', 'text-align': 'start', 'justify-content': 'center'}), 
                    width=2, 
                    style={'background-color': 'lightblue', 'text-align': 'center'}
                ),
                dbc.Col(
                    dbc.Input(type="number", min=0, max=10, step=1), 
                    width=8, 
                    style={'background-color': 'HotPink'}
                ),
                dbc.Col(
                    html.P('fuck', id="output_002"), 
                    width=2, 
                    style={'background-color': 'lightskyblue'}
                ),
            ],
            justify='center' # 设置此行列的水平间距和对齐方式
        ),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(html.P('只允许输入数字'), width=2, align='center'),
                dbc.Col(dbc.Input(type="number", min=0, max=10, step=1), width=8),
                dbc.Col(html.P(id="output_003"), width='auto'),
            ]
        )        
    ]
)

@app.callback(Output("output_001", "children"), [Input("input", "value")])
def output_text(value):
    return value